<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>选择买家</title>
    <meta name="keywords" content="知果汇"/>
    <meta name="description" content="知果汇"/>
    <link rel="SHORTCUT ICON" href="images/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="_CSS_/reset.css">
    <link rel="stylesheet" type="text/css" href="_CSS_/common.css">
    <link rel="stylesheet" type="text/css" href="_CSS_/store_center.css"/>
    <style type="text/css">
        html, body {
            width: 560px;
            height: 380px;
            margin: 0;
            padding: 0;
        }

        p {
            margin: 0;
        }

        .fl {
            float: left;
        }

        form {
            width: 982px;
            padding: 20px;
        }

        .formItem {
            overflow: hidden;
        }

        .formItem label {
            font-size: 14px;
            color: #333333;
        }

        .products {
            overflow: hidden;
            width: 470px;
        }

        .products img {
            width: 120px;
            height: 120px;
            float: left;
        }

        .products p {
            width: 340px;
            display: inline-block;
            float: left;
            padding-left: 10px;
            margin-bottom: 15px;
        }

        .productName {
            font-size: 14px;
            color: #333333;
        }

        .greyTag {
            color: #999999;
            font-size: 12px;
            width: 70px;
            display: inline-block;
        }

        .types, .mode {
            font-size: 11px;
            color: #333333;
        }

        .priceNum {
            font-size: 14px;
            color: #FF4900;
        }

        .fillin {
            border: 1px solid #E5E5E5;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            color: #999999;
            width: 428px;
            padding: 0 10px;
        }

        .commentsFill {
            font-size: 14px;
            text-indent: 0;
        }

        .mt10 {
            margin-top: 10px;
        }

        .courseSelect {
            border: none;
            width: 982px;
        }

        .choose-box {
            width: 982px;
            margin-top: 20px;
        }

        .choose-list {
            height: 347px;
            overflow-y: scroll;
        }

        .choose-list table {
            width: 982px;
            border: 1px solid #E5E5E5;
            font-size: 14px;
            color: #1b1b1b;
        }

        .choose-list table tr th {
            background-color: #f6f6f6;
            line-height: 40px;
        }

        .choose-list table tr td {
            text-align: center;
            line-height: 60px;
            border-bottom: 1px solid #E5E5E5;
        }

        .choose-list table .td-r {
            color: #ff4900;
            font-weight: bold;
        }

        .choose-foot {
            line-height: 50px;
            background-color: #eeeeee; /* position: fixed;bottom: 15px;  */
        }

        .choose-foot p {
            color: #ff4900;
            font-size: 14px;
            padding-left: 25px;
        }

        .choose-foot a {
            display: block;
            float: right;
            width: 120px;
            height: 50px;
            text-align: center;
            background-color: #ff4900;
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
        }

        .icon-sorts0 {
            width: 8px;
            height: 13px;
            margin-left: 5px;
            margin-bottom: 2px;
            background: url(/static/web/images/sorting.png);
        }

        .icon-sorts1 {
            width: 8px;
            height: 6px;
            margin-left: 5px;
            margin-bottom: 2px;
            background: url(/static/web/images/sorting1.png);
        }

        .icon-sorts2 {
            width: 8px;
            height: 6px;
            margin-left: 5px;
            margin-bottom: 10px;
            background: url(/static/web/images/sorting2.png);
        }
    </style>
</head>
<body>
<form action="" method="post">
    <div class="formItem">
        <div class="products fl" name="products">
            <img class="name" src="" alt=""/>
            <p class="productName name"></p>
            <p class="prices priceNum"><span class="greyTag">价格</span><span class="priceNum"></span></p>
            <p class="mode"><span class="greyTag">交易方式</span><span class="serviceTyp name"></span></p>
            <p class="types"><span class="greyTag">类型</span><span class="productType"></span></p>
        </div>
    </div>
    <div class="formItem mt10">
        <div class="courseSelect">
            <ul>

            </ul>
        </div>
        <input type="hidden" id="index">
        <input type="hidden" id="value">
        <input type="hidden" id="page">
        <input type="hidden" id="username">
        <input type="hidden" id="all">
        <input type="hidden" id="money">
        <input type="hidden" id="id">
        <input type="hidden" id="uid">
        <input type="hidden" id="store">
        <input type="hidden" id="time">
        <div class="choose-box">
            <!-- 选择一个买家 -->
            <div class="choose-list">
                <table>
                    <thead>
                    <tr class="choose-th">
                        <th>买家</th>
                        <th>出价<span class="icons icons-click-store icon-sorts0"></span></th>
                        <th>出价时间<span class="icons icons-click-time icon-sorts0"></span></th>
                        <th></th>
                        <th>选择</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

            </div>
            <div class="choose-foot">
                <p id="select"></p>
            </div>
        </div>
    </div>
</form>
</body>
<script src="_JS_/jquery-1.8.3.min.js"></script>
<script src="_JS_/jquery.base64.js"></script>
<script src="_JS_/jquery.cookie.js"></script>
<script src="_JS_/common.js"></script>
<script src="_P_/layer/layer.js"></script>
<script src="_JS_/time.js"></script>
<script type="text/javascript">
    $(function () {
        var url = window.location.href;
        uid = url.split("#")[1];//卖
        id = url.split("#")[2];//商品
        value = url.split("#")[3];
        page_id = url.split("#")[4];
        all = url.split("#")[5];
        $("#uid").val(uid);
        $("#index").val(id);
        $("#page").val(page_id);
        $("#all").val(all);
        if (value == 1) {
            $(".productType").text('交易类商品');
        } else {
            $(".productType").text('服务类商品');
        }

        $("#value").val(value);
        postfile(uid, id, value);
    });

    function postfile(uid, id, value, store, time) {

        $.ajax({
            type: 'GET',
            url: "{:url('api/shop/orders_choose')}",
            dataType: 'jsonp',
            jsonp: 'callback',
            data: {id: id, 'uid': uid, 'value': value, 'store': store, 'time': time},
            success: function (msg) {
                if (msg.code == 200) {

                    $(".courseSelect ul").html('');
                    for (var j = 0; j < msg.data.category.length; j++) {
                        var king = '';
                        if (msg.data.category[j].id == msg.data.trading_id) {
                            king += '<li class="selected"><a class="selectType" href="javascript:;">' + msg.data.category[j].trading_name + '</a></li>';
                        } else {
                            king += '<li><a class="selectType" href="javascript:;">' + msg.data.category[j].trading_name + '</a></li>';
                        }
                        $('.courseSelect ul').append(king);
                    }

                    $(".name").eq(0).attr('src', "/Images/tradingMarket/" + msg.data.image);
                    $(".name").eq(1).html(msg.data.username);
					var store = number_format(msg.data.store, 2, ".", ",");
                    $(".prices").text("￥" + store);
                    $(".name").eq(2).html(msg.data.trading_name);
                    $("#id").val(msg.data.id);
                    $(".choose-list tbody").html("");
                    for (var i = 0; i < msg.data.offer.length; i++) {
						var store = number_format(msg.data.offer[i].store, 2, ".", ",");
                        var html = '<tr data-id="' + msg.data.offer[i].id + '"><td>' + msg.data.offer[i].username + '</td>' +
                            '<td class="td-r">￥' + store + '</td>' +
                            '<td>' + getMyDate(msg.data.offer[i].time * 1000) + '</td>' +
                            '<td>' + msg.data.trading_name + '</td>';
                        if (msg.data.trading_id == 3 || msg.data.trading_id == 4 || msg.data.trading_id == 10) {
                            html += '<td><input type="checkbox" value="' + msg.data.offer[i].id + '"></td></tr>';
                            $("#select").html("注：与一个或多个买家达成协议<a href=\"#\" title=\"确认选择\" onclick=\"confirm_all(this)\">确认</a>");
                        } else {
                            html += '<td><input type="radio" name="order"></td></tr>';
                            $("#select").html("注：只能与一个买家达成协议<a href=\"#\" title=\"确认选择\" onclick=\"confirm(this)\">确认</a>");
                        }
                        $('.choose-list tbody').append(html);
                        $("#username").val(msg.data.offer[i].uid);
                    }
                }
            }
        })
    }


    function confirm(obj) {
        var index = parent.layer.getFrameIndex(window.name);
        var id = $('input[name="order"]:checked ').parents('tr').data('id');
        var uid = $("#index").val();
        var value = $("#value").val();
        var page = $("#page").val();
        var all = $("#all").val();
        if (page == '') {
            page = 1;
        }
        if (id == null) {
            return false;
        } else {
            $.ajax({
                type: 'GET',
                url: "{:url('api/shop/confirm')}",
                dataType: 'jsonp',
                jsonp: 'callback',
                data: {id: id, 'uid': uid, 'value': value, 'king': 1},
				beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
				},
                success: function (msg) {
                    if (msg.code == 200) {
                        parent.postfile(page, value, all);
                        parent.layer.close(index);
                    } else {
                        layer.msg(msg.message, {icon: 5, time: 5000});
                    }
                }
            })
        }
    }

    function confirm_all(obj) {
        var index = parent.layer.getFrameIndex(window.name);
        var document_role = $("tbody").find("input:checkbox:checked");
        var role_val = {};
        var i = 0;
        $.each(document_role, function () {
            role_val[i] = $(this).val();
            i++;
        });
        var uid = $("#index").val();
        var value = $("#value").val();
        var page = $("#page").val();
        var all = $("#all").val();
        var user = $("#uid").val();
        if (page == '') {
            page = 1;
        }
        $.ajax({
            type: 'post',
            url: "{:url('api/shop/confirm')}",
            dataType: 'json',
            data: {'id': role_val, 'uid': uid, 'user': user, 'value': value, 'king': 2},
			beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
			},
            success: function (msg) {
				layer.closeAll();
                if (msg.code == 200) {
                    parent.postfile(page, value, all);
                    parent.layer.close(index);
                } else {
                    layer.msg(msg.message, {icon: 5, time: 5000});
                }

            }
        })
    }

    $('.icons-click-store').on('click', function () {
        var uid = $("#uid").val();
        var value = $("#value").val();
        var id = $("#id").val();
        var time = $("#time").val();

        if ($(this).hasClass('icon-sorts0')) {
            $(this).removeClass('icon-sorts0').addClass('icon-sorts1');
        } else if ($(this).hasClass('icon-sorts1')) {
            $(this).removeClass('icon-sorts1').addClass('icon-sorts2');
        } else if ($(this).hasClass('icon-sorts2')) {
            $(this).removeClass('icon-sorts2').addClass('icon-sorts0');
        }

        if ($(this).attr('class') == 'icons icons-click-store icon-sorts0') {
            postfile(uid, id, value, 0, time);
            $("#store").val(0);
        } else if ($(this).attr('class') == 'icons icons-click-store icon-sorts1') {
            postfile(uid, id, value, 1, time);
            $("#store").val(1);
        } else if ($(this).attr('class') == 'icons icons-click-store icon-sorts2') {
            postfile(uid, id, value, 2, time);
            $("#store").val(2);
        }
    })


    $('.icons-click-time').on('click', function () {
        var uid = $("#uid").val();
        var value = $("#value").val();
        var id = $("#id").val();
        var store = $("#store").val();
        if ($(this).hasClass('icon-sorts0')) {
            $(this).removeClass('icon-sorts0').addClass('icon-sorts1');
        } else if ($(this).hasClass('icon-sorts1')) {
            $(this).removeClass('icon-sorts1').addClass('icon-sorts2');
        } else if ($(this).hasClass('icon-sorts2')) {
            $(this).removeClass('icon-sorts2').addClass('icon-sorts0');
        }
        if ($(this).attr('class') == 'icons icons-click-time icon-sorts0') {
            postfile(uid, id, value, store, 0);
            $("#time").val(0);
        } else if ($(this).attr('class') == 'icons icons-click-time icon-sorts1') {
            postfile(uid, id, value, store, 1);
            $("#time").val(1);
        } else if ($(this).attr('class') == 'icons icons-click-time icon-sorts2') {
            postfile(uid, id, value, store, 2);
            $("#time").val(2);
        }
    })
</script>
</html>
